<template>
    <div class="market-data">
        <VChart ref="chartRef" :option="options" :autoresize="true"/>
    </div>
</template>

<script setup>
import VChart from "vue-echarts";
import {registerMap, use} from "echarts";
import {GridComponent, TooltipComponent} from "echarts/components";
import {BarChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {useTemplateRef} from "vue";
import geoJson from '@/assets/map/jiangsu.json';
import {getMapData} from "@/api/Dashboard/StatisticsSection.js";


use([
    TooltipComponent,
    GridComponent,
    BarChart,
    CanvasRenderer
]);

const mapName = 'jiangsu';

registerMap(mapName, geoJson);

const chartRef = useTemplateRef('chartRef');

const selectedLegend = ref({
    Evaporation: true,
    Precipitation: false,
});

// 十三太保的提示数据
const tooltipData = [
    // {
    //     name: '徐州',
    //     caseload: 123,
    //     visit: 213
    // },
    // {
    //     name: '连云港',
    //     caseload: 123,
    //     visit: 213
    // },
    // {
    //     name: '宿迁',
    //     caseload: randomNumberInRange(1,20),
    //     visit: randomNumberInRange(1,30)
    // },
    // {
    //     name: '淮安',
    //     caseload: randomNumberInRange(1,20),
    //     visit: randomNumberInRange(1,30)
    // },
    // {
    //     name: '盐城',
    //     caseload: randomNumberInRange(1,20),
    //     visit: randomNumberInRange(1,30)
    // },
    // {
    //     name: '扬州',
    //     caseload: 123,
    //     visit: 213
    // },
    // {
    //     name: '泰州',
    //     caseload: randomNumberInRange(1,20),
    //     visit: randomNumberInRange(1,30)
    // },
    // {
    //     name: '南京市',
    //     caseload: randomNumberInRange(1, 20),
    //     visit: randomNumberInRange(1, 30)
    // },
    // {
    //     name: '镇江',
    //     caseload: 123,
    //     visit: 213
    // },
    // {
    //     name: '南通',
    //     caseload: randomNumberInRange(1,20),
    //     visit: randomNumberInRange(1,30)
    // },
    // {
    //     name: '常州',
    //     caseload: 123,
    //     visit: 213
    // },
    // {
    //     name: '无锡',
    //     caseload: 123,
    //     visit: 213
    // },
    // {
    //     name: '苏州',
    //     caseload: randomNumberInRange(1,20),
    //     visit: randomNumberInRange(1,30)
    // }
]

// 十三太保坐标系
const geoCoordinateData = {
    '徐州市': [117.659598, 34.31225],
    '连云港市': [119.227949, 34.595057],
    '宿迁市': [118.487476, 33.891367],
    '淮安市': [119.094964, 33.540174],
    '盐城市': [120.166211, 33.415261],
    '扬州市': [119.60089, 33.006997],
    '泰州市': [120.00563, 32.478344],
    '南京市': [118.883395, 31.781669],
    '镇江市': [119.440838, 32.19545],
    '南通市': [121.12287, 32.156478],
    '常州市': [119.757267, 31.703057],
    '无锡市': [120.319732, 31.499549],
    '苏州市': [120.557549, 30.992521]
}


const lineData = () => {
    return tooltipData.map((item) => {
        return {
            coords: [geoCoordinateData[item.name], [geoCoordinateData[item.name][0], geoCoordinateData[item.name][1] + 1.5]]
        }
    })
}


const convertData = function (data) {
    let res = [];
    for (let i = 0; i < data.length; i++) {
        const geoCoordinate = geoCoordinateData[data[i].name];
        if (geoCoordinate) {
            res.push({
                name: data[i].name,
                value: geoCoordinate.concat(data[i].value),
            });
        }
    }
    return res;
}

const scatterData = (seriesData) => {
    return seriesData.map((item) => {
        if (geoCoordinateData[item.name]) {
            return [geoCoordinateData[item.name][0], geoCoordinateData[item.name][1], item]
        }
    })

}
const options = ref({});

let intervalId;

onMounted(() => {
    getData()
    intervalId = setInterval(getData, 2 * 60 * 1000)
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId)
    }
})

const getData = async () => {
    const res = await getMapData()
    const {data} = res
    const seriesData = data.map(item => {
        return {
            name: item.depName.slice(0, -1),
            // 在办案件数量
            caseload: item.jwApplyDetailCount,
            // 来访人数
            visit: item.jwCheckInLoginCount
        }
    });

    setChartOptions(seriesData)
}

const setChartOptions = (seriesData = []) => {
    options.value = {
        geo: [
            {
                // 是否显示地理坐标系组件
                show: true,
                // 使用 registerMap 注册的地图名称
                map: 'jiangsu',
                // 是否开启鼠标缩放和平移漫游
                roam: false,
                // 地图的长宽比
                aspectScale: 1,
                // 当前视角的缩放比例
                zoom: 0.65,
                // 定义地图中心在屏幕中的位置
                layoutCenter: ['50%', '50%'],
                // 定义地图的大小
                layoutSize: '180%',
                // 图形上的文本标签
                label: {
                    // 是否显示标签
                    show: false,
                    // 文字的颜色
                    color: '#fff'
                },
                emphasis: {
                    label: {
                        show: false,
                        color: '#fff'
                    },
                    itemStyle: {
                        // 地图区域的颜色
                        areaColor: "rgba(0,254,233,0.6)",
                    }
                },
                itemStyle: {
                    areaColor: {
                        type: 'linear',
                        x: 1200,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(3,27,78,0.75)', // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(58,149,253,0.75)', // 50% 处的颜色
                        },],
                        global: true, // 缺省为 false
                    },
                    borderColor: '#c0f3fb',
                    borderWidth: 1,
                    shadowColor: '#8cd3ef',
                    shadowOffsetY: 10,
                    shadowBlur: 10
                }
            },
            {
                type: 'map',
                map: mapName,
                zlevel: -1,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '51%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(58,149,253,0.8)',
                    shadowColor: 'rgba(172, 122, 255,0.5)',
                    shadowOffsetY: 5,
                    shadowBlur: 15,
                    areaColor: 'rgba(5,21,35,0.1)'
                }
            },
            {
                type: 'map',
                map: mapName,
                zlevel: -2,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '52%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(58,149,253,0.6)',
                    shadowColor: 'rgba(65, 214, 255,1)',
                    shadowOffsetY: 5,
                    shadowBlur: 15,
                    areaColor: 'transparent'
                }
            },
            {
                type: 'map',
                map: mapName,
                zlevel: -3,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '53%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(58,149,253,0.4)',
                    shadowColor: 'rgba(58,149,253,1)',
                    shadowOffsetY: 15,
                    shadowBlur: 10,
                    areaColor: 'transparent'
                }
            },
            {
                type: 'map',
                map: mapName,
                zlevel: -4,
                aspectScale: 1,
                zoom: 0.65,
                layoutCenter: ['50%', '54%'],
                layoutSize: '180%',
                roam: false,
                silent: true,
                itemStyle: {
                    borderWidth: 5,
                    borderColor: 'rgba(5,9,57,0.8)',
                    shadowColor: 'rgba(29, 111, 165,0.8)',
                    shadowOffsetY: 15,
                    shadowBlur: 10,
                    areaColor: 'rgba(5,21,35,0.1)',
                }
            }
        ],

        series: [
            {
                type: 'map',
                map: mapName,
                geoIndex: 0,
                aspectScale: 1,
                zoom: 0.65,
                showLegendSymbol: true,
                roam: true,
                label: {
                    show: true,
                    color: "#fff",
                    fontSize: "120%",
                },
                emphasis: {
                    label: {
                        show: false,
                        color: '#fff'
                    },
                    itemStyle: {
                        // 地图区域的颜色
                        areaColor: "rgba(0,254,233,0.6)",
                    }
                },
                itemStyle: {
                    areaColor: {
                        type: "linear",
                        x: 1200,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                        },],
                        global: true, // 缺省为 false
                    },
                    borderColor: "#fff",
                    borderWidth: 0.2,
                },
                layoutCenter: ["50%", "50%"],
                layoutSize: "180%",
                animation: false,
                markPoint: {
                    symbol: "none"
                },
                data: [
                    {name: '南京', value: 5}
                ],
            },
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 5,
                label: {
                    show: true,
                    formatter: (params) => {
                        const {name, caseload, visit} = params.data[2];
                        return `{title|${name}}\n{case|在办案件:${caseload}起}\n{visit|来访人:${visit}人}`;
                    },
                    color: '#fff',
                    rich: {
                        title: {
                            color: '#fff',
                            fontSize: 16,
                            align: 'center',
                            padding: [0, 0, 2, 0]
                        },
                        fline: {
                            color: '#fff',
                            fontSize: 17,
                            fontWeight: 600,
                            align: 'center'
                        },
                        case: {
                            color: '#FFFFFF',
                            fontSize: 12
                        },
                        visit: {
                            color: '#F9CC45',
                            fontSize: 12,
                        },
                    }
                },
                emphasis: {
                    show: true
                },
                itemStyle: {
                    color: '#00FFF6',
                    opacity: 1
                },
                symbol: 'image://',
                symbolSize: [110, 60],
                symbolOffset: [0, -20],
                z: 999,
                data: scatterData(seriesData),
            },
            {
                name: '数据顶部',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                rippleEffect: {
                    scale: 5,
                    brushType: 'stroke',
                },
                label: {
                    formatter: '{b}',
                    position: 'bottom',
                    show: false,
                    color: "#fff",
                    distance: 10,
                },
                symbol: 'circle',
                symbolSize: [20, 10],
                itemStyle: {
                    color: '#16ffff',
                    shadowBlur: 10,
                    shadowColor: '#16ffff',
                    opacity: 1
                },
                zlevel: 4,
                data: convertData(seriesData),
            }
        ]
    }
}
</script>

<style scoped lang="scss">
.market-data {
    width: 100%;
    height: 100%;
}
</style>